<template>
    <div class="main">

        <!-- 二级路由 -->
        <div>
            <router-view></router-view>
        </div>

        <van-tabbar class="tab-nav" v-model="activeName" inactive-color="#646566" active-color="#0C34BA" route>
            <van-tabbar-item :icon="item.icon" v-for="(item, index) in tabbarData" :key="index" :name="item.name"
                replace :to="item.path" :dot="item.dot">{{item.title}}</van-tabbar-item>
        </van-tabbar>

    </div>
</template>

<script>
    export default {
        name: 'Main',
        data() {
            return {

                //激活标签的名称
                activeName: 'Home',

                tabbarData: [{
                        title: '首页',
                        icon: 'home-o',

                        //标签名称、路由名称
                        name: 'Home',

                        path: '/home',

                        dot: true
                    },
                    {
                        title: '菜单',
                        icon: 'shop-o',
                        name: 'Menu',
                        path: '/menu'
                    },
                    {
                        title: '购物袋',
                        icon: 'goods-collect-o',
                        name: 'Shopbag',
                        path: '/shopbag'
                    },
                    {
                        title: '我的',
                        icon: 'contact',
                        name: 'Mine',
                        path: '/mine'
                    }
                ]
            };
        },

        methods: {

        }
    }
</script>

<style scoped>
.main{
    background-color: #f5f5f5;
}
</style>